<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="轮播封面" prop="poster">
      <ImgUpload v-model:poster="ruleForm.poster" :preview="ruleForm.poster" />
    </el-form-item>
    <el-form-item label="轮播链接" prop="link">
      <el-input v-model="ruleForm.link" />
    </el-form-item>
    <el-form-item label="是否上架" prop="online">
      <el-switch v-model="ruleForm.online" />
    </el-form-item>
    <el-form-item label="轮播描述" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm"> 修改 </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import axios from "axios";
import ImgUpload from "@/components/img-upload.vue";
import { bannerPut } from "@/api/product";
export default {
  components: {
    ImgUpload,
  },
  data() {
    return {
      ruleForm: {
        poster: "",
        link: "",
        online: 1,
        desc: "",
      },
      rules: {
        poster: [{ required: true, message: "请填写轮播图", trigger: "blur" }],
        link: [{ required: true, message: "请填写链接", trigger: "blur" }],
        online: [
          { required: true, message: "请填选择online", trigger: "blur" },
        ],
        desc: [{ required: true, message: "请填描述", trigger: "blur" }],
      },
    };
  },
  created() {
    this.ruleForm = this.$route.query;
  },
  methods: {
    async submitForm() {
      console.log(this.$refs.ruleFormRef);
      let formEl = this.$refs.ruleFormRef; //获取了form表单对象
      if (!formEl) return;
      //触发表单验证
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log("submit!", this.ruleForm);
          bannerPut(this.ruleForm.objectId, this.ruleForm);
        } else {
          console.log("error submit!", fields);
        }
      });
    },
  },
};
</script>
